/* ######################################################################

	PD1000 'sp_background.css' for PIUON - 2014.04.01
	HTML 5 & Newest web browser preferential support
	Specialization for webapp

	- By PD1000 (Web service creator) -

	본 스타일시트는 배경 에디터 패널을 구현해주는 스타일시트이다.

###################################################################### */


/* ======================================================================
	Top side Shortcut icons
====================================================================== */

.sp_bgnavi_box{position:relative;width:270px}
.panel_top{position:relative;width:100%;height:40px;overflow:hidden;zoom:1}
.box_top, .box_title_outer{position:relative;margin:0 0 2px 0;overflow:hidden;zoom:1}
.box_title{float:left;margin-bottom:1px;line-height:17px}
.index_icon_box{position:relative;float:left;margin-top:2px}
.index_icon_box img{width:16px;margin-right:4px;cursor:pointer}
.index_icon:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=90)";filter:Alpha(Opacity=90);opacity:0.9}
.bg_save_box{position:absolute;top:0;right:0;width:40px;height:40px}
.bg_save_box img{width:100%}


/* ======================================================================
	Navigation area
====================================================================== */

/* Navigation icon box
---------------------------------------------------------------------- */
/* Top side */
.bg_item_selector{position:relative;width:100%;height:auto;box-sizing:border-box;text-align:center;background:#f5f5f5\9 /* Hack IE8 */}
.selector_title{position:relative;padding:8px 0 16px 12px;overflow:hidden;zoom:1}
.all_reset{float:right;position:relative;margin:1px 8px 0 0;cursor:pointer}
.item_select_box{width:84%;height:60px;padding:0 8%}
.item_select_inner{position:relative;width:100%;height:100%}
.btn_item_all{position:absolute;width:20%;height:90%;padding:0;border:1px solid #f2f2f2;text-align:left;cursor:pointer}

/* Icons */
.btn_item1, .btn_item2, .btn_item3, .btn_item6{background-repeat:no-repeat;background-position:center center;background-size:cover}
.btn_item1{bottom:4px;left:0}
.btn_item2{bottom:8px;left:16%}
.btn_item3{bottom:0px;left:32%}
.btn_item4{bottom:4px;left:48%}
.btn_item5{bottom:8px;left:64%}
.btn_item6{bottom:2px;left:80%}
.btn_item4{background:rgba(255,200,0,0.5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFC800, endColorstr=#7FFFC800);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFC800, endColorstr=#7FFFC800)"}


/* Navigation icon color
---------------------------------------------------------------------- */
/* Before hover (Gray) */
.btn_item_gray{
	filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 10\'/></filter></svg>#grayscale"); /* Firefox 3.5+, IE10 */
	filter:gray; /* IE6-9 */
	-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
	-webkit-transition: all .2s ease; /* Fade to color for Chrome and Safari */
	-webkit-backface-visibility: hidden; /* Fix for transition flickering */
}

/* After hover (All color) */
.btn_item_color, .btn_item_all:hover{border:3px solid #FFC837;filter:none;-webkit-filter:grayscale(0%)}

/* Item show, hide button(Checkbox) */
.icon_item_off{display:none;width:40%;margin:4px}
.btn_onoff_box{position:relative;width:78%;padding:8px 11% 0 11%;text-align:justify;-ms-text-justify:distribute-all-lines;text-justify:distribute-all-lines}
.onoff_btn{zoom:1;width:20px;height:20px;border:3px solid #fff;overflow:hidden}
.stretch{display:inline-block;position:relative;width:88%;height:12px;padding:6px 6% 0 6%}
.stretch_inner_l{float:left;width:30%;height:8px;border-left:1px solid #888;border-bottom:1px solid #888}
.stretch_inner_r{float:right;width:30%;height:8px;border-right:1px solid #888;border-bottom:1px solid #888}
.stretch_inner_c{position:absolute;top:7px;left:50%;width:auto;margin-left:-63px;padding:0 8px;background:#f5f5f5}

/* Fullscreen BG selector (Checkbox)*/
.select_fs_box{padding:0 7%;text-align:left}
.select_fs_title{line-height:1.2em}
.bg_fullscreen_box{position:relative}
.btn_fs_cb{position:absolute;top:0;left:4px}
.bg_guide_box{display:none}


/* ======================================================================
	Background editor area - ★★★ TIP : 상단 네비게이션 영역을 제외한 본체 영역
====================================================================== */

/* Basic setting
---------------------------------------------------------------------- */
/* Basic layout */
.bg_setting_panel{position:relative;width:270px;height:60%} /* ★★★ TIP : 이곳에 'overflow:hidden' 금지 */

/* Panel position */
.panel_bg_pattern, .panel_bg_pic, .panel_bg_color, .panel_bg_envelop, .panel_bg_effect{position:absolute;top:0;left:-120%;width:100%;height:100%}
.panel_bg_texture{position:absolute;top:0;left:0;width:100%} /* ★★★ TIP : 첫 시작은 bg_texture로... */


/* Common elements
---------------------------------------------------------------------- */
/* Basic box */
.box_outer{position:relative}
.amount_input{width:30px;border:0;color:#249FCE;font-weight:bold;background:transparent}
.box_sh_icon1, .box_sh_icon2{position:absolute;right:3px;width:16px;height:16px;cursor:pointer;z-index:1}
.box_sh_icon1{top:280px}
.box_sh_icon2{top:406px}
.arrow_tgo1, .arrow_tgo2, .arrow_tgc{position:absolute;top:0;right:0;width:100%} /* More icon */
.arrow_tgo2, .arrow_tgc{display:none}
.arrow_tgo1{display:block}

/* Mini gallery */
.photo_box{position:relative;width:250px;height:auto;margin:0 0 16px 0;border-top:8px;border-right:10px;border-bottom:8px;border-left:8px;border-style:solid;border-color:#fff;overflow:hidden}
.photo_box_inner{width:100%;height:63px;overflow:hidden}
.photo_frame{display:inline-block;cursor:pointer}
.photo_frame img{width:100%}
.box_top{position:relative;margin:0 0 2px 0;overflow:hidden;zoom:1}

/* Background area selector (Radio)*/
.select_bg_box{width:100%}
.select_bg_title{}
.rp_select_bg, .tx_select_bg{width:22px;height:22px;border:3px solid #fff;overflow:hidden}

/* Slider bar (Opacity control) */
.slider_box{position:relative;width:94%;margin-left:3px}
.slider_bar{width:100%;height:9px;border:solid 4px #fff;background:url(../images/slider_bg.png) center right  no-repeat}
.ui-widget-content{}
.ui-slider-handle{position:absolute;top:-6px;width:32px;height:46px;margin-left:-11px;cursor:pointer;background:url(../images/slider_handle.png) no-repeat}


/* Mask option
---------------------------------------------------------------------- */
.bgpic_mask{width:100%;height:42px;padding:10px 15px;box-sizing:border-box}
.bgpic_mask img{margin-left:1px;cursor:pointer}
.bgpic_mask_on{outline:2px dotted #D83F61}


/* ======================================================================
	Media Query
====================================================================== */